<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th style="background: #ffffff;"  class="" ><input type="checkbox" id="checkAll" >全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP地址</th>
							<th>执行时间</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
						<tr>
							<td colspan="7">数据加载中...</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			      
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	
 	$(function(){
		var pageURL="doPageUI.do";
		//在pageId对应的元素位置,加载pageURl对应的资源
		$("#pageId").load(pageURL,function(){
			//异步加载服务器数据(日志信息)
			doGetObjects();
		});
		//注册查询按钮事件
		$(".input-group-btn").on("click",".btn-search",doQueryObjects);
		$(".input-group-btn").on("click",".btn-delete",doDeleteObjects);
		//全选checkbox对象注册点击事件
		$("thead").on("change","#checkAll",doChangeTBodyCheckBoxState);
		// 
		$("#tbodyId").on("change",".cBox",doChangeTHeadCheckBoxState);
	});
	
	// 基于thead中checkbox对象状态修改checkbox中对象状态
	function doChangeTBodyCheckBoxState(){
		//获取thead中checkbox对象状态
		var flag=$("#checkAll").prop("checked")
		//修改tbody中checkbox对象状态
		$("#tbodyId input[type='checkbox']").each(function(){
			$(this).prop("checked",flag);
		});
	}
	
	function doChangeTHeadCheckBoxState(){
		//获取tbody中所有checkbox对象状态相与的结果
		var flag=true;
		$("#tbodyId input[type='checkbox']").each(function(){
			flag=flag&&$(this).prop("checked");
		});
		//修改thead中checkbox对象状态
		$("#checkAll").prop("checked",flag);
	}
	
	function doGetObjects(){
		// 设置全选按钮的初始化状态
		$("#checkAll").prop("checked",false);
		//1.异步加载日志信息
		//1.1 url
		var url="log/doFindPageObjects.do"
		//1.2 params
		var pageCurrent =$("#pageId").data("pageCurrent");
		if(!pageCurrent) pageCurrent=1;
		var params ={"pageCurrent":pageCurrent};
		// 获取用户名
		var username=$("#searchNameId").val();
		if (username) params.username=username;
		console.log(username);
		/* var params="pageCurrent=1" */
		//1.3 异步request//固定语法结构
		//基于jquery中的getJSON函数向服务端发送异步请求
		$.getJSON(url,params,function(result){
			//console.log(result)
			//2.将日志信息呈现在页面上
			doHandleResponseResult(result);
		})
	}
	function doHandleResponseResult(result){
		//console.log(result);
		if (result.state==1) {
			//更新table中tbody内部的数据
			doSetTableBodyRows(result.data.records);
			//更新页面page.html分页数据
			doSetPagination(result.data);
		} else{
			alert(result.message);
		}
	}
	function doSetTableBodyRows(records){
		//console.log(records)
		//1.获取tbody对象,并清空对象
		var tbody =$("#tbodyId");
		tbody.empty();
		//2.迭代records记录,并将其内容追加到<tbody>
		for (var i = 0; i < records.length; i++) {
			//2.1构建tr对象
			var tr=$("<tr></tr>");
			//2.2构建tds对象
			var tds=doCreatdTds(records[i]);
			//2.3将tds追加到tr中
			tr.append(tds);
			//2.4将tr追加到tbody中
			tbody.append(tr);
		}
	}
	function doCreatdTds(data){
		var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"+
		   	 "<td>"+data.username+"</td>"+
		     "<td>"+data.operation+"</td>"+
		     "<td>"+data.method+"</td>"+
		     "<td>"+data.params+"</td>"+
		     "<td>"+data.ip+"</td>"+
		     "<td>"+data.time+"</td>";	   
		return tds;
	}
	
	// 获取用户选中的checked对应的id
	function doGetCheckedIds(){
		//1.定义数组,用于存储选中的checked的值
		var array=[];
		//2.获取tbody中所有的checkbox
		$("#tbodyId input[type='checkbox']").each(function(){
			// .each()迭代所有的CheckBox
			//存储选中的checkbox的值
			//$(this)代表当前checkbox对象
			if($(this).prop("checked")){
				array.push($(this).val());
			}
		});
		return array;
	}
	
	function doQueryObjects(){
		//1.初始化当前页面值
		$("#pageId").data("pageCurrent",1);
		//2.执行查询操作
		doGetObjects();
	}
	
	function doDeleteObjects(){
		//1.url
		var url ="log/doDeleteObjects.do"
		//2.params
		var ids=doGetCheckedIds();
		var params={"ids":ids.toString()}
		//3.send request
		var mos =confirm("确定要删除选中的"+ids.length+"条数据？");
		if(mos == true){
			$.post(url,params,function(result){
				if (result.state == 1) {
					alert(result.message);
					doSetPageCurrent();
					doGetObjects();
				} else{
					alert(result.message);
				}
			});
		}else{
			alert("操作已取消");
		}
	}
	
	function doSetPageCurrent(){
		var pageCurrent =$("#pageId").data("pageCurrent");
		var pageCount =$("#pageId").data("pageCount");
		var state=$("#checkAll").prop("checked");
		if(pageCurrent==pageCount&&pageCurrent>1&&state){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
	}

</script>




